<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      title="审核"
      :visible.sync="toExamineData.toExamineDataStatus"
      width="40%"
      :modal="false"
      :destroy-on-close="true"
      @close="closeExamineDataStatus"
    >
      <el-form
        :model="approxForm"
        ref="approxForm"
        label-width="100px"
        class="materRequireAudit-form"
      >
        <el-form-item
          label="审批结果"
          prop="approveOperation"
        >
          <el-radio-group v-model="approxForm.approveOperation">
            <el-radio label="1">同意</el-radio>
            <el-radio label="0">终止</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="批复意见">
          <el-input
            type="textarea"
            resize="none"
            v-model="approxForm.opinion"
            style="width: 90%"
          ></el-input>
        </el-form-item>
      </el-form>
      <div style="display: flex">
        <h3
          style="width: 80px; margin-right: 20px; text-align: right"
          class="overviewContentTitle"
        >
          审批流
        </h3>
        <div class="overviewContentLeftbottom">
          <img
            class="shenpiPng"
            src="./img/shenpi.png"
            alt=""
          />
          <div class="steps">
            <div
              class="stepsItem"
              v-for="(item, index) in steps.logVoList"
              :key="index"
            >
              <div class="userImg">
                <div class="flex">
                  <el-avatar
                    v-if="item.stateName === '已终止'"
                    size="large"
                    class="stepAvatar text-danger"
                    style="background: #f56c6c"
                  >
                    X
                  </el-avatar>
                  <el-avatar
                    v-else-if="item.finishTime"
                    size="large"
                    class="stepAvatar"
                    style="background: #67c23a"
                  >
                    {{ item.operatorName.charAt(0) }}
                  </el-avatar>
                  <el-avatar
                    v-else-if="item.state === 'completed'"
                    size="large"
                    class="stepAvatar"
                    style="background: #67c23a"
                  >
                    √
                  </el-avatar>
                  <el-avatar
                    v-else-if="!item.finishTime"
                    size="large"
                    class="stepAvatar"
                    style="background: #e6a23c"
                  >
                    {{ item.operatorName.charAt(0) }}
                  </el-avatar>
                  <el-avatar
                    v-else
                    size="large"
                    class="stepAvatar"
                    style="background: #67c23a"
                  >
                    √
                  </el-avatar>

                  <div class="texttitle">
                    <p class="text-primary">{{ item.stateName }}</p>

                    <p>{{ item.operatorName }}</p>
                  </div>
                </div>
              </div>
              <div
                style="width: 50%; color: black"
                class=""
              >
                <div class="xmtime">
                  <div>
                    <span
                      v-if="item.finishTime"
                      style="color: #409eff; margin-left: 10px"
                    >
                      {{ item.finishTime }}</span
                    >
                    <span
                      v-else-if="!item.finishTime"
                      style="color: #409eff; margin-left: 10px"
                    >
                      待审批</span
                    >
                  </div>
                </div>
                <div class="nr">
                  {{ item.comment }}
                </div>
              </div>
              <div
                class="progress"
                v-if="index < steps.logVoList.length - 1"
              ></div>
            </div>
          </div>
        </div>
      </div>

      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="toExamineData.toExamineDataStatus = false"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="approxProjectApi()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  props: {
    toExamineData: Object,
    approxForm: Object,
    steps: Object,
  },
  mounted() {},

  methods: {
    toExamineDataChange(data, res) {
      this.steps = res
    },
    approxProjectApi() {
      this.$parent.toExamineFun()
    },

    closeExamineDataStatus() {
      this.$parent.toExamineDataClean()
    },
  },
}
</script>
<style lang="less" scoped>
#warehouseReceipt {
  .importDataStatus {
    .importDataStatusStep1 {
      .greenBorder {
        border: 1px solid #34c758;
        background-color: #f5fcf6;
        padding: 1rem 2rem;
        border-radius: 5px;
      }
      .importDataStatusStep1div {
        color: black;
        background-color: #f3f3f3;
        padding: 3rem;
        border-radius: 10px;
        border-left: 15px solid #5677fc;
        .importDataStatusStep1divA {
          margin-top: 1rem;
          color: #5677fc;
        }
        .importDataStatusStep1divtitle {
          font-weight: 600;

          margin-bottom: 0.5rem;
          font-size: 16px;
          color: #5677fc;
        }
        .explain {
          margin-bottom: 1.5rem;
        }
      }
    }
    .importDataStatusImg {
      margin: 0 auto;
      text-align: center;
      color: #909399;
      width: 15rem;
      height: 25rem;
      img {
        width: 15rem;
        height: 15rem;
      }
    }
  }
}
.el-date-editor {
  margin: 0 10px;
}
.overviewContentLeftbottom {
  position: relative;
  padding: 10px;
  border: 1px dashed #909399;
  height: 24rem;
  width: 78%;

  .shenpiPng {
    position: absolute;
    top: -30px;
    right: -60px;
    width: 100px;
    height: 100px;
  }
  .overviewContentLeftbottomTitle {
  }
  .steps {
    overflow: auto;
    height: 100%;
    .stepsItem {
      display: flex;
      justify-content: space-between;
      padding: 2rem;
      position: relative;

      .progress {
        position: absolute;
        height: 3rem;
        width: 2px;
        background-color: #eeeeee;
        bottom: -1.5rem;
        left: 3.3rem;
      }
      .xmtime {
        justify-content: space-between;
        width: 100%;
        text-align: right;
        float: right;
      }
      .nr {
        margin-top: 2px;
      }
    }
    .userImg {
      margin-right: 2rem;
      height: 3rem;
    }
  }
}
.imgBox {
  position: relative;
  top: 0;
  left: 0;
  .uploadImg {
    position: absolute;
    top: 30%;
    left: 30%;
    visibility: hidden;
  }
}
.imgBox:hover .uploadImg {
  visibility: visible;
}
:deep(.el-dialog__header) {
  background-color: rgb(43, 43, 53);
}
:deep(.el-dialog__title) {
  color: #fff;
}
.texttitle {
  min-width: 10rem;
  max-width: 10rem;
  margin-left: 1rem;
}
b-10 {
  margin-bottom: 10px;
}
</style>
